<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 relative overflow-hidden">
    <!-- 装饰元素 -->
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10 pointer-events-none">
      <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
      <div class="absolute top-1/3 -right-24 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
      <div class="absolute -bottom-24 left-1/3 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
    </div>
    
    <div class="max-w-md w-full space-y-8 p-10 bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl relative z-10 border border-gray-100">
      <div class="text-center">
        <LogoTitle subtitle="加入我们，分享你的摄影作品" />
      </div>
      
      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
        <div class="space-y-5">
          <UFormGroup label="用户名">
            <UInput 
              v-model="username" 
              type="username" 
              placeholder="请输入用户名" 
              icon="i-heroicons-user"
              class="transition-all duration-200 focus:ring-2 focus:ring-primary-500"
            />
          </UFormGroup>
          
          <UFormGroup label="密码">
            <UInput 
              v-model="password" 
              type="password" 
              placeholder="请输入密码" 
              icon="i-heroicons-lock-closed"
              class="transition-all duration-200 focus:ring-2 focus:ring-primary-500"
            />
          </UFormGroup>
        </div>
        
        <div class="flex items-center justify-between">
          <UCheckbox 
            v-model="rememberMe" 
            label="记住密码"
            class="text-sm"
          />

          <ULink 
            to="/forgot-password" 
            class="text-sm text-primary-600 hover:text-primary-500 transition-colors duration-200"
          >
            忘记密码？
          </ULink>
        </div>
        
        <div>
          <UButton 
            type="submit" 
            color="emerald" 
            block 
            :loading="isLoading"
            class="py-3 text-base font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5"
          >
            登录
          </UButton>
        </div>
        
        <div class="text-center pt-2">
          <p class="text-sm text-gray-600">
            还没有账号？
            <ULink 
              to="/user/register" 
              class="text-primary-600 hover:text-primary-500 font-medium transition-colors duration-200"
            >
              立即注册
            </ULink>
          </p>
        </div>
        
        <!-- 体验账号提示卡片 -->
        <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg shadow-sm">
          <div class="flex items-start">
            <UIcon name="i-heroicons-information-circle" class="h-5 w-5 text-blue-500 mt-0.5 mr-2" />
            <div>
              <h3 class="text-sm font-medium text-blue-800 mb-1">演示环境体验账号</h3>
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <div class="text-sm text-gray-700">
                    <span class="font-medium">账号：</span>beilanzhisen
                  </div>
                  <UButton
                    size="xs"
                    color="gray"
                    variant="soft"
                    icon="i-heroicons-clipboard"
                    @click="copyToClipboard('beilanzhisen')"
                    class="ml-2"
                  >
                    复制
                  </UButton>
                </div>
                <div class="flex items-center justify-between">
                  <div class="text-sm text-gray-700">
                    <span class="font-medium">密码：</span>123..comA
                  </div>
                  <UButton
                    size="xs"
                    color="gray"
                    variant="soft"
                    icon="i-heroicons-clipboard"
                    @click="copyToClipboard('123..comA')"
                    class="ml-2"
                  >
                    复制
                  </UButton>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    
    <!-- 演示项目提示模态框 -->
    <DemoProjectModal v-model="showDemoModal" @close="handleDemoModalClose" />
  </div>
</template>

<script setup lang="ts">
import { auth } from '~/utils/auth'
import { ref, onMounted } from 'vue'

const username = ref('')
const password = ref('')
const rememberMe = ref(false)
const isLoading = ref(false)
const showDemoModal = ref(false)

// 添加登录状态检查
onMounted(() => {
  const userId = localStorage.getItem('user_id')
  if (userId) {
    navigateTo('/content')
  }
})

// 复制文本到剪贴板
const copyToClipboard = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    // 显示复制成功提示
    useToast().add({
      title: '复制成功',
      description: '已复制到剪贴板',
      color: 'green',
      icon: 'i-heroicons-check-circle',
      timeout: 2000
    })
  }).catch(err => {
    console.error('复制失败:', err)
    // 显示复制失败提示
    useToast().add({
      title: '复制失败',
      description: '请手动复制',
      color: 'red',
      icon: 'i-heroicons-x-circle',
      timeout: 2000
    })
  })
}

// 处理演示模态框关闭事件
const handleDemoModalClose = () => {
  // 可以在这里添加额外的处理逻辑
}

const handleLogin = async () => {
  try {
    isLoading.value = true
    const response = await auth.login({
      username: username.value,
      password: password.value
    })
    if (response.code === 0) {
      // 登录成功，保存用户信息并跳转到首页
      localStorage.setItem('user_id', response.data.user_id.toString())
      localStorage.setItem('username', response.data.username)
      // 创建并触发一个自定义事件，以便同一页面内的组件能够感知到登录状态的变化
      window.dispatchEvent(new Event('login-state-changed'))
      // 同时触发storage事件，以便其他页面能够感知到登录状态的变化
      window.dispatchEvent(new Event('storage'))
      
      // 检查是否需要显示演示项目提示
      const isDismissed = localStorage.getItem('demoProjectModalDismissed') === 'true'
      if (!isDismissed) {
        showDemoModal.value = true
        // 延迟导航，等待用户查看提示
        setTimeout(() => {
          if (!showDemoModal.value) {
            navigateTo('/content')
          }
        }, 500)
      } else {
        await navigateTo('/content')
      }
    }
  } catch (error) {
    console.error('登录失败：', error)
  } finally {
    isLoading.value = false
  }
}
</script>